<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="oP"></p>
  <input type="text" id="oInput">
  <script>
  // input 框中输入内容，p 里面也跟着变化
  /* oInput.oninput = function(e) {
    oP.innerHTML = e.target.value
  } */
  // 数据的响应式：数据变化，视图自动更新
  // 双向数据绑定：视图变化 => 数据跟着变化；数据变化 => 视图自动更新

  const data = {
    str: 'hello'
  }

  // 参数 1，给那个对象定义
  // 参数 2，定义什么属性
  // 参数 3，配置对象
  // 数据劫持：就是把 data 中的数据都变成 getter 和 setter 的形式，获取的时候会触发 getter，设置的时候触发 setter
  Object.defineProperty(data, 'str',  {
    get() {
      // 获取数据的时候会自动触发这儿
      return 8
    },
    set(newValue) {
      // 设置数据的时候会自动触发这儿
      // newValue 就是设置的那个数据
      console.log(newValue)
    }
  })
  // console.log(data.str)

  data.str = 'world'

  console.log(data.str)
  </script>
</body>
</html>